/*
 * @Description: 判断是否请求数据，在请求数据时弹出加载状态用以避免频繁请求
 * @Author: shuaishuai.wang
 * @Date: 2019-08-23 15:58:05
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-29 17:02:36
 */
<template>
  <div
    class="state_main fontsize32"
    v-show="stateOption.mask"
    @click="toRequest"
  >
    <div class="state_area">
      <div class="state_icon">
        <i
          class="iconfont fontsize38"
          :class="state[stateOption.index].icon"
        ></i>
      </div>
      <div class="state_msg">{{state[stateOption.index].msg}}<span
          v-show="stateOption.index > 0"
          @click="stateOption.mask = false"
        >或者<span style="text-decoration:underline">关闭</span></span></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      state: [{ // 预先设置好的请求状态图标及其提示文字
        icon: 'icon-loading-01 revolve',
        msg: '正在请求数据...'
      }, {
        icon: '',
        msg: '数据请求失败，点击重试'
      }]
    }
  },
  props: {
    stateOption: {
      mask: true, // 遮罩层状态控制
      index: { // 当前遮罩层显示状态，0为请求中，1为请求失败
        type: Number,
        default: 0
      }
    }
  },
  methods: {
    toRequest() {
      if (this.stateOption.index > 0) { // 当前请求失败时允许使用自定义方法重新请求
        this.$emit('toRequest')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.state_main {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 4;
  .state_area {
    width: fit-content;
    height: fit-content;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    color: #999;
    i {
      display: block;
    }
    .revolve {
      animation: revolveAnime 1s infinite;
    }
  }
}
@keyframes revolveAnime {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
